
<blockquote class='quote-from-book'>	<p><span class='ic'>“</span>Vertical space is metered in a different way <span class='bracket'>[</span>to horizontal space<span class='bracket'>]</span>. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.”</p>
 </blockquote>
	<p>Leading <span class='bracket'>(</span>pronounced “ledding”<span class='bracket'>)</span> is so called because, in mechanical presses, strips of lead are placed between lines of type to space the lines apart. Leading is achieved in <abbr title="Cascading Style Sheets">CSS</abbr> through the <code>line-height</code> property. For example 12&nbsp;point text can be given 3&nbsp;points of lead in the following&nbsp;manner:</p>

<pre><code>p {
  font-size: 12pt;
  line-height: 15pt;
}</code></pre>

	<p>That example will give you the same line-height throughout all your paragraphs, however it does introduce the danger that, when the browser text size is increased by your reader <span class='bracket'>(</span>to 18&nbsp;pt for example<span class='bracket'>)</span> the line-height may remain at 15&nbsp;pt. The result being that, instead of the lines being spaced apart, they would actually&nbsp;overlap.</p>

	<p>A safer approach is to use a unitless value. The preceding example could also be coded&nbsp;as:</p>

<pre><code>p {
  font-size: 12pt;
  line-height: 1.25;
}</code></pre>

	<p>In this example the value of <code>line-height</code> is a multiplier: 1.25&nbsp;x 12 = 15&nbsp;pt. This is a far more reliable method as the line-height <span class='bracket'>(</span>the distance between baselines<span class='bracket'>)</span> will always be proportional to the text size. Line height can be incorporated into the <code>font</code> property using a shorthand familiar to&nbsp;typographers:</p>

<pre><code>p {
  font: 12pt/1.25 "Minion Pro", "Minion Web", serif;
}</code></pre>

	<p>It should be noted that some browsers add a little leading by default: Safari and Internet Explorers for example; whereas others, such as Camino and Firefox, do not. Text on the web almost always benefits from an increase in line height, and figures upwards of 1.3&nbsp;are common <span class='bracket'>(</span>this page has a <code>line-height</code> of 1.5&nbsp;for&nbsp;example<span class='bracket'>)</span>.</p>

	<p>Unlike in mechanical presses, where one line of lead is added below the text, the spacing added on the Web is divided equally above and below the text. To illustrate this the following example has a <code>line-height</code> of 3&nbsp;and shows the text set midway between two&nbsp;borders:</p>

	<div class="example"><div class="ex2-2-1i">line-height spacing is added equally above and below the text</div></div>

	<p>Negative leading, in other words a <code>line-height</code> value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For&nbsp;example:</p>

<pre><code>.example {
  font-size: 1.5em;
  line-height: 0.85;
  text-indent: -0.5em;
}</code></pre>

	<div class="ex2-2-1ii example">this is an&nbsp;example<br />
of negative leading</div>
